<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <style>
    .child {
      border: 1px solid black;
      height: 200px;
    }
    .parent {
      height: 400px;
      border: 3px solid black;
    }
  </style>
</head>

<body>
  <h1>
    <span class="label label-info">DEMO 7</span>
  </h1>
  <br>
  <br>
  <br>
  <div id="well">

  </div>

  <script src="js/jquery.min.js"></script>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>

  <script type="text/babel">
    class Child extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          color : ''
        }
      }
      // ----------------增设内容start--------------------
      changeColor(e) {
        this.setState({color: e.target.getAttribute("data-color")});
      }
      // ----------------增设内容end--------------------
      render() {
        return (
          <div style={{backgroundColor: this.state.color}} className="col-xs-5 col-xs-offset-1 child">
            <br/>
            <ul className="list-inline">
              <li><a href="#" data-color="#286090" className="btn btn-primary" onClick={this.props.parentChangeColor}>&nbsp;</a></li>
              <li><a href="#" data-color="#31b0d5" className="btn btn-info" onClick={this.props.parentChangeColor}>&nbsp;</a></li>
              <li><a href="#" data-color="#c9302c" className="btn btn-danger" onClick={this.props.parentChangeColor}>&nbsp;</a></li>
              <li><a href="#" data-color="#ec971f" className="btn btn-warning" onClick={this.props.parentChangeColor}>&nbsp;</a></li>
              <li><a href="#" data-color="#e6e6e6" className="btn btn-default" onClick={this.props.parentChangeColor}>&nbsp;</a></li>
            </ul>
          </div>
        )
      }
    }

    class Parent extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          color : ''
        }
        this.changeColor = this.changeColor.bind(this)
        this.child1ChangeColor = this.child1ChangeColor.bind(this)
        this.child2ChangeColor = this.child2ChangeColor.bind(this)
      }
      changeColor(e) {
        this.setState({color: e.target.getAttribute("data-color")});
      }
      // ----------------增设内容start--------------------
      child1ChangeColor(e) {
        this.refs["child1"].changeColor(e); // 子组件的这个方法不用bind(this)了
      }
      child2ChangeColor(e) {
        this.refs["child2"].changeColor(e);
      }
      // ----------------增设内容end--------------------
      render() {
        return (
          <div style={{backgroundColor: this.state.color}} className="col-xs-10 col-xs-offset-1 parent">
              <br/>
              {/* ----------------增设内容start------------ */}
              <ul className="list-inline">
                  <li>对应第一个child</li>
                  <li><a href="#" data-color="#286090" className="btn btn-primary" onClick={this.child1ChangeColor}>&nbsp;</a></li>
                  <li><a href="#" data-color="#31b0d5" className="btn btn-info" onClick={this.child1ChangeColor}>&nbsp;</a></li>
                  <li><a href="#" data-color="#c9302c" className="btn btn-danger" onClick={this.child1ChangeColor}>&nbsp;</a></li>
                  <li><a href="#" data-color="#ec971f" className="btn btn-warning" onClick={this.child1ChangeColor}>&nbsp;</a></li>
                  <li><a href="#" data-color="#e6e6e6" className="btn btn-default" onClick={this.child1ChangeColor}>&nbsp;</a></li>
              </ul>
              <ul className="list-inline">
                  <li>对应第二个child</li>
                  <li><a href="#" data-color="#286090" className="btn btn-primary" onClick={this.child2ChangeColor}>&nbsp;</a></li>
                  <li><a href="#" data-color="#31b0d5" className="btn btn-info" onClick={this.child2ChangeColor}>&nbsp;</a></li>
                  <li><a href="#" data-color="#c9302c" className="btn btn-danger" onClick={this.child2ChangeColor}>&nbsp;</a></li>
                  <li><a href="#" data-color="#ec971f" className="btn btn-warning" onClick={this.child2ChangeColor}>&nbsp;</a></li>
                  <li><a href="#" data-color="#e6e6e6" className="btn btn-default" onClick={this.child2ChangeColor}>&nbsp;</a></li>
              </ul>
              <hr/>
              {/* --------------------增设内容end-------------------- */}
              <Child ref="child1" parentChangeColor={this.changeColor} />
              <Child ref="child2" parentChangeColor={this.changeColor} />
          </div>
        )
      }
    }


    ReactDOM.render(
        <Parent />,
        document.getElementById('well')
    )
  </script>
</body>
</html>